<template>
	<view class="content">
		<view class="top p15">
			<view class="flex" style="padding: 30rpx 0;">
				<view>
					<image class="avatar" :src="helper.host+userinfo.avatar" mode="aspectFill"></image>
				</view>
				<view>
					<view class="f15">{{ userinfo.nickname }}</view>
					<view class="flex f12" style="margin-top: 20rpx;">
						<image class="weizhicon" src="../../static/icon/weizhi.png" mode="aspectFill"></image>
						<text>{{address}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="bott p15">
			<view class="flexb" style="padding-top: 30rpx;">
				<view class="addess f15">{{address}}</view>
				<view class="f12">发现问题<text style="font-size: 30rpx;font-weight: bold;">{{desc.q_num}}</text>个</view>
			</view>
			<view style="background-color: #f5f5f5;height: 940rpx;margin: 10rpx 0;">
				<map class="map" :latitude="map.latitude" :longitude="map.longitude" :enable-3D="true"
					:include-points="map.polyline.points" :markers="covers" :scale="map.scale"
					:polyline="map.polyline"></map>
					<am
			</view>
			<view class="f12" style="text-align: right;color: #848485;">巡检时间：{{desc.riqi}}
				{{desc.start_time}}-{{desc.end_time}}
			</view>
		</view>
	</view>
</template>
<script>
	import QQMapWX from '../../libs/qqmap-wx-jssdk/qqmap-wx-jssdk.js';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import myIssue from '@/components/myIssue.vue';
	import helper from '../../common/helper.js';
	import api from '../../common/api.js';
	export default {
		data() {
			return {
				userinfo: [],
				qqmapsdk: {},
				map: {
					longitude: '116.4',
					latitude: '39.9',
					polyline: [{
						points: [],
						color: '#0055ff',
						width: 55,
						dottedLine:true,
						borderWidth:20,
						colorList:true,
					},{
						points: [],
						color: '#ff0000',
						width: 55,
						dottedLine:true,
						borderWidth:20,
						colorList:true,
					}],
					scale: 16
				},
				covers: [],
				helper: [],
				address: '',
				desc: [],
				id: 0
			}
		},
		onLoad(op) {
			this.id = op.id
			this.helper = helper;
			this.initSdk();
			this.getUserInfo();
			// this.onl();
			var _this = this;
			//获取位置
			uni.getLocation({
				type: 'gcj02',
				success: res => {
					// 当前地址
					this.currLocation = res;
					// 设置地图信息
					// this.map.latitude = res.latitude;
					// this.map.longitude = res.longitude;
					console.log('id',_this.id)
					helper.post('/addons/ddrive/user/xc_desc', {
						id: _this.id
					}).then(res2 => {
						if (res2.code == 1) {
							_this.desc = res2.data;
							
							_this.map = {
								latitude: res2.data.points[0]['latitude'],
								longitude: res2.data.points[0]['longitude'],
								scale: 16,
								polyline: [{
									points: res2.data.points,
									color: '#0055ff',
									width: 20,
									dottedLine:true,
									borderWidth:20,
									colorList:true,
								},{
									points: res2.data.points,
									color: '#ff0000',
									width: 20,
									dottedLine:true,
									borderWidth:20,
									colorList:true,
								}]
							};
							_this.covers.push({
								latitude: res2.data.points[0].latitude,
								longitude: res2.data.points[0].longitude,
								width:20,
								iconPath: '../../static/r.png'
							});
							_this.covers.push({
								latitude: res2.data.points[res2.data.points
									.length - 1].latitude,
								longitude: res2.data.points[res2.data.points
									.length - 1].longitude,
								width:20,
								iconPath: '../../static/car.png'
							});
						}
						console.log('covers',res2.data.points)
						// 坐标点
						// _this.map.covers.push({
						// 	latitude: res2.data.points[0]['latitude'],
						// 	longitude: res2.data.points[0]['longitude'],
						// 	 iconPath: '../../static/wds.png',
						// 	title: '开始点'
						// });
						// _this.map.covers.push({
						// 	latitude: res2.data.points[es2.data.points.length - 1]['latitude'],
						// 	longitude: res2.data.points[es2.data.points.length - 1][
						// 		'longitude'],
						// 	 iconPath: '../../static/wds.png',
						// 	title: '结束点'
						// });
						console.log(res2.data.points);
						// 坐标转地址信息
						console.log('map', _this.map)
						_this.qqmapsdk.reverseGeocoder({
							location: {
								latitude: res2.data.points[0]['latitude'],
								longitude: res2.data.points[0]['longitude']
							},
							complete: res => {
								console.log(res);
								if (res.status == 0) {
									this.address = res.result.address;
									this.currAddress = res.result;
									this.city = res.result.address_component.city;
								}
							}
						});

					})
				}
			});
		},
		methods: {
			initSdk() {
				this.qqmapsdk = new QQMapWX({
					key: helper.config.qqmapsdk.key
				});
			},
			async getUserInfo() {
				let res = await api.getUserInfo();
				this.userinfo = res.data;
			},
		}
	}
</script>

<style scoped>
	uni-map {
		width: 100%;
		height: 100%;
	}

	.top {
		background-color: #1986FB;
		color: #ffffff;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.weizhicon {
		width: 36rpx;
		height: 36rpx;
	}

	.successimg {
		width: 60rpx;
		height: 60rpx;
	}

	.bott {
		position: relative;
		bottom: 18rpx;
		/* height: 100%; */
		background: #ffffff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}

	.addess {
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
		width: 74%;
	}

	.bj {
		background-color: #2B56A2;
		height: 280rpx;
		margin-top: 30rpx;
		padding: 10rpx;
		position: relative;
	}

	.erweima {
		width: 100%;
		height: 100%;
	}

	.ewm {
		background-color: #ffffff;
		height: 120rpx;
		width: 120rpx;
		padding: 10rpx;
		position: absolute;
		bottom: 10rpx;
		right: 10rpx;
	}

	.gd {
		background-color: #F3CF77;
		width: 110rpx;
		height: 110rpx;
		line-height: 120rpx;
		border-radius: 50%;
		position: fixed;
		bottom: 60rpx;
		right: 30rpx;
		text-align: center;
	}

	.gdimg {
		width: 40rpx;
		height: 40rpx;
	}

	page {
		background-color: #ffffff;
	}
</style>
